import Animator from './animator.js';
const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>JS Starter</h1>`;

window.ani = null;


window.restart = () => {
    if (ani) {
        ani.cancel();
    }
    window.ani = new Animator(appDiv).addFrame((grapStamp, interStamp, context) => {
        const sec = interStamp / 1000;
        const $el = context.el;
        const left = $el.getClientRects()[0].left;
        $el._xdir ? '' : $el._xdir = 'r';
        $el.style.position != 'absolute' ? $el.style.position = 'absolute' : '';
        if ($el._xdir == 'r') {
            $el.style.left = $el.getClientRects()[0].left + 200 * sec + 'px';
            if ($el.getClientRects()[0].left >= 500) {
                $el._xdir = 'l';
            }

        } else {
            $el.style.left = $el.getClientRects()[0].left - 200 * sec + 'px';
            if ($el.getClientRects()[0].left <= 0) {
                $el._xdir = 'r';
            }
        }
    }).addFrame(function (grapStamp, interStamp, context) {
        const sec = interStamp / 1000;
        const $el = context.el;
        const top = $el.getClientRects()[0].top;
        $el._ydir ? '' : $el._ydir = 'b';
        $el.style.position != 'absolute' ? $el.style.position = 'absolute' : '';
        if ($el._ydir == 'b') {
            $el.style.top = $el.getClientRects()[0].top + 200 * sec + 'px';
            if ($el.getClientRects()[0].top >= 500) {
                $el._ydir = 't';
            }

        } else {
            $el.style.top = $el.getClientRects()[0].top - 200 * sec + 'px';
            if ($el.getClientRects()[0].top <= 0) {
                $el._ydir = 'b';
            }
        }
    }).start();
}